<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农业平台管理系统</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        .menu-item a {
    color: inherit; /* 继承父元素颜色 */
    text-decoration: none; /* 去除下划线 */
    display: block; /* 使整个区域可点击 */
    width: 100%;
    height: 100%;
}
        /* 添加悬停状态 */
.menu-item a:hover {
    color: inherit;
}
        /* 侧边栏 */
        .admin-sidebar {
            width: 240px;
            height: 100vh;
            background: #2c3e50;
            position: fixed;
            padding: 1rem;
            color: white;
        }

        .sidebar-title {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            padding: 0.5rem;
            border-bottom: 1px solid #34495e;
        }

        .sidebar-menu {
            list-style: none;
        }

        .menu-item {
            padding: 0.8rem;
            margin: 0.5rem 0;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .menu-item:hover {
            background: #34495e;
        }

        .menu-item.active {
            background: #3498db;
        }

        /* 内容区域 */
        .admin-content {
            margin-left: 240px;
            padding: 2rem;
            background: #f5f6fa;
            min-height: 100vh;
        }

        /* 数据表格 */
        .data-table {
            width: 100%;
            background: white;
            border-collapse: collapse;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .data-table th,
        .data-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .data-table th {
            background: #3498db;
            color: white;
        }

        .table-action {
            padding: 0.3rem 0.5rem;
            margin: 0 0.2rem;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .edit-btn {
            background: #27ae60;
            color: white;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
        }

        /* 数据概览卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* 表单样式 */
        .data-form {
            background: white;
            padding: 2rem;
            border-radius: 6px;
            max-width: 600px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 管理系统布局 -->
    <nav class="admin-sidebar">
        <div class="sidebar-title">农业平台管理</div>
        <ul class="sidebar-menu">
            <li class="menu-item active" data-page="dashboard">数据概览</li>
            <li class="menu-item" data-page="products">商品管理</li>
            <li class="menu-item" data-page="orders">订单管理</li>
            <li class="menu-item" data-page="users">用户管理</li>
            <li class="menu-item" data-page="content">内容管理</li>
            <li class="menu-item">
                    <a href="{% url 'SalesApp:index' %}">点击返回页面</a>
            </li>
        </ul>
    </nav>

    <main class="admin-content" id="adminContent">
        <!-- 内容通过JavaScript动态生成 -->
    </main>

    <script>
        // 模拟数据
        const mockData = {
            dashboard: {
                stats: [
                    { title: "今日订单", value: 152, color: "#3498db" },
                    { title: "商品总数", value: 2345, color: "#27ae60" },
                    { title: "注册用户", value: 865, color: "#e67e22" },
                    { title: "待处理订单", value: 23, color: "#e74c3c" }
                ]
            },
            products: {
                headers: ["ID", "商品名称", "分类", "库存", "价格", "操作"],
                items: [
                    [1, "有机西红柿", "蔬菜", 150, 12.8],
                    [2, "红富士苹果", "水果", 80, 18.5],
                    [3, "东北大米", "谷物", 200, 6.5]
                ]
            },
            orders: {
                headers: ["订单号", "用户", "金额", "状态", "操作"],
                items: [
                    ["202308001", "张伟", 128.5, "已发货"],
                    ["202308002", "李明", 65.0, "待付款"],
                    ["202308003", "王芳", 245.0, "已收货"]
                ]
            },
            users: {
                headers: ["用户ID", "用户名", "手机号", "注册时间", "操作"],
                items: [
                    [1001, "user1", "13800138000", "2023-07-01"],
                    [1002, "user2", "13900139000", "2023-07-05"],
                    [1003, "user3", "13600136000", "2023-08-01"]
                ]
            }
        };

        // 页面渲染函数
        function renderPage(page) {
            const container = document.getElementById('adminContent');
            let content = '';

            switch(page) {
                case 'dashboard':
                    content = `
                        <h2>数据概览</h2>
                        <div class="stats-grid">
                            ${mockData.dashboard.stats.map(stat => `
                                <div class="stat-card" style="border-left: 4px solid ${stat.color}">
                                    <h3>${stat.title}</h3>
                                    <p style="font-size: 2rem; margin-top: 1rem">${stat.value}</p>
                                </div>
                            `).join('')}
                        </div>
                    `;
                    break;

                case 'products':
                    content = `
                        <div class="table-header">
                            <h2>商品管理</h2>
                            <button class="edit-btn">+ 添加商品</button>
                        </div>
                        <table class="data-table">
                            <thead>
                                <tr>
                                    ${mockData.products.headers.map(h => `<th>${h}</th>`).join('')}
                                </tr>
                            </thead>
                            <tbody>
                                ${mockData.products.items.map(item => `
                                    <tr>
                                        ${item.map(td => `<td>${td}</td>`).join('')}
                                        <td>
                                            <button class="table-action edit-btn">编辑</button>
                                            <button class="table-action delete-btn">删除</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    break;

                case 'orders':
                    content = `
                        <h2>订单管理</h2>
                        <table class="data-table">
                            <thead>
                                <tr>
                                    ${mockData.orders.headers.map(h => `<th>${h}</th>`).join('')}
                                </tr>
                            </thead>
                            <tbody>
                                ${mockData.orders.items.map(item => `
                                    <tr>
                                        ${item.map(td => `<td>${td}</td>`).join('')}
                                        <td>
                                            <button class="table-action edit-btn">详情</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    break;

                case 'users':
                    content = `
                        <h2>用户管理</h2>
                        <table class="data-table">
                            <thead>
                                <tr>
                                    ${mockData.users.headers.map(h => `<th>${h}</th>`).join('')}
                                </tr>
                            </thead>
                            <tbody>
                                ${mockData.users.items.map(item => `
                                    <tr>
                                        ${item.map(td => `<td>${td}</td>`).join('')}
                                        <td>
                                            <button class="table-action edit-btn">编辑</button>
                                            <button class="table-action delete-btn">禁用</button>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                    break;

                case 'content':
                    content = `
                        <h2>内容管理</h2>
                        <div class="data-form">
                            <div class="form-group">
                                <label class="form-label">文章标题</label>
                                <input type="text" class="form-input">
                            </div>
                            <div class="form-group">
                                <label class="form-label">文章内容</label>
                                <textarea class="form-input" rows="6"></textarea>
                            </div>
                            <button class="edit-btn">发布文章</button>
                        </div>
                    `;
                    break;
            }

            container.innerHTML = content;
        }

        // 侧边栏点击事件
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function() {
                // 更新激活状态
                document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');

                // 获取并渲染页面
                const page = this.dataset.page;
                renderPage(page);
            });
        });

        // 初始化显示仪表盘
        renderPage('dashboard');
    </script>
</body>
</html>